<template>
    <van-cell @click="toDetail(filmItem.filmId)">
        <div class="films-item">
            <div class="films-item-aside">
                <img :src="filmItem.poster" alt="">
            </div>
            <div class="films-item-center">
                <div class="title">
                    {{ filmItem.name }}
                    <van-tag color="#d2d6dc">{{ filmItem.item.name }}</van-tag>
                </div>
                <div v-if="filmItem.grade">观众评分: <span class="grade"> {{ filmItem.grade }}</span></div>
                <div >主演:<span>{{ filmItem.actors | actorsFilter  }}</span></div>
                <!-- 正在热映: -->
                <template v-if="pageType === 1">
                    <span>{{ filmItem.nation }} | {{ filmItem.runtime }} 分钟</span>
                </template>
                <!-- 即将上映 -->
                <div v-else>上映日期:{{ filmItem.premiereAt | timeFormat }}</div>
            </div>
            <div class="films-item-aside item-btn">
                <van-button
                    v-if="pageType === 1 || filmItem.isPresale"
                    size="mini"
                    plain
                    :color="pageType === 1 ? '#ff5f16' : '#ffb232'"
                    @click.stop="toBuyTicket(filmItem.filmId)">
                    {{ pageType === 1 ? '购票' : '预购' }}
                </van-button>
            </div>
        </div>
        
    </van-cell>
</template>

<script>
import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn'; // 导入中文语言包

export default {
    props:{
        filmItem:{
            type: Object,
            default: ()=>{}
        },
        pageType: {
            type: Number,
            default: 1
        }
    },
    filters: {
        actorsFilter: (actors) => {
            return actors && actors.map(item => item.name).join(',')
        },
        timeFormat: (premiereAt) => {
            dayjs.locale('zh-cn'); // 设置语言为中文
            let weekday = dayjs(premiereAt * 1000).format('周dd');
            return weekday + ' '+dayjs(premiereAt * 1000).format("M月D日")
        }
    },
    methods: {
        // 跳转
        // 2. 使用 /路径/参数值
        toDetail(filmId){
            this.$router.push(`/film/${filmId}`)
        },
        toBuyTicket(filmId){
            this.$router.push(`/film/${filmId}/cinemas`)
        }
    }
}
</script>

<style scoped>
.films-item {
    display: flex;
    align-items: center;
    
}
img {
    width: 66px;
}
.films-item-aside{
    flex-shrink: 0;
}
.films-item-center {
    overflow: hidden;
    width: 100%;
    display: flex;
    flex-direction: column;
    color: #797d82;
    font-size: 13px;
    margin: 0 10px;
}
.films-item-center div{
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}
.title {
    color: #191a1b;
    font-size: 17px;
    line-height: 18px;
}
.grade {
    color: #ffb232;
    font-size: 14px
}
.item-btn {
    width: 66px;
    text-align: center;
}
</style>